<template>
  <div>
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-common-work_bench container">
      <mt-loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
        :autoFill="false">
        <swipeout>
          <swipeout-item
            ref="swipeoutItem"
            :right-menu-width="30"
            :sensitivity="15"
            v-for="(item, key) in allbidsData"
            :key="key"
            :auto-close-on-button-click="false">
            <div slot="content" class="demo-content vux-1px-b">
              <ul>
                <li ref="oli" class="mui-selected vm-work_bench-item mui-table-view-cell">
                  <div class="mui-slider-handle">
                    <h5 class="vm-work_bench-item-title">
                      <h3>{{ item.cIBidsTatle }}</h3>
                      <x-icon type="ios-arrow-right" size="22"></x-icon>
                    </h5>
                    <div class="vm-work_bench-item-body">
                      <div>
                        <span>责任人：</span>
                        <em>{{ item.cRealName }}</em>
                      </div>
                      <div>
                        <span>公告期：</span>
                        <em>{{ item.iAnnDay }}天</em>
                      </div>
                      <div>
                        <span>状态：</span>
                        <em :class="[item.ClassName]" v-if="item.iRangeStatus == 0">新建</em>
                        <em :class="[item.ClassName]"  v-if="item.iRangeStatus == 1">公告期</em>
                        <em :class="[item.ClassName]"  v-if="item.iRangeStatus == 2">投标期</em>
                        <em :class="[item.ClassName]"  v-if="item.iRangeStatus == 3">评标期</em>
                        <em :class="[item.ClassName]"  v-if="item.iRangeStatus == 4">公示期</em>
                        <em :class="[item.ClassName]"  v-if="item.iRangeStatus == 5">结束期</em>
                      </div>
                      <div style="width: 100%;">
                        <span>开标时间：</span>
                        <em>{{ item.dOpenTime }}</em>
                      </div>
                    </div>
                  </div>
                </li>
                <div class="vm-work_bench-item-footer">
                  <mt-button type="default" @click="changeState(item,key,item.ID)">修改状态</mt-button>
                </div>
              </ul>
            </div>
          </swipeout-item>
        </swipeout>
        <vm-common-noData v-if="!allbidsData.length"></vm-common-noData>
      </mt-loadmore>
    </div>
    <mt-popup
      v-model="popupVisible"
      position="bottom">
      <picker
        :data='years'
        v-model='year1'
        :columns="years.length"></picker>
      <div class="submit">
        <mt-button type="danger" @click="submitChangeStatus">提交</mt-button>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import vmCommonHeader from '@/components/vm-common-header' // header 组件
  import {Swipeout, SwipeoutItem, SwipeoutButton} from 'vux'
  import {MessageBox} from 'mint-ui'
  import { bid_statuslist, bid_modifyStatus } from '@/api/work_bench.js'
  import { Picker } from 'vux'

  export default {
    data() {
      return {
        pageTitle: this.$route.meta.pageTitle, // page标题
        goBack: this.$route.meta.goBack, // 是否返回
        allbidsData: new Array(),
        tempListData: new Array(),
        tempIndex: null,
        planListPage: 1, //当前页数
        allLoaded: false, // 是否还有数据
        examineStatus: false,
        reasonData: '', // 审批内容
        isActive1: false,
        isActive2: false,
        popupVisible: false,
        years: [
          { name: '--请选择--', value: 0 },
          { name: '公告期', value: 1},
          { name: '招标期', value: 2},
          { name: '评标期', value: 3},
          { name: '公示期', value: 4},
          { name: '结束期', value: 5}
          ],
        year1: [''],
        ID: null
      }
    },
    created() {
      this.getallbidsData();
    },
    methods: {
      // 获取需求计划数据
      getallbidsData(loadmoreType) {
        let planListPage = this.planListPage;
        bid_statuslist(planListPage).then(res => {
          if (!res.data.data.length) {
            this.allLoaded = true; // 若数据已全部获取完毕
          }
          res.data.data.map((item, key, arr) => {
            switch (item.iRangeStatus) {
              case "0":
                item.ClassName = 'create';
                break;
              case "1":
                item.ClassName = 'announcementPeriod';
                break;
              case "2":
                item.ClassName = 'tender';
                break;
              case "3":
                item.ClassName = 'bidEvaluationPeriod';
                break;
              case "4":
                item.ClassName = 'announcementPeriod';
                break;
              case "5":
                item.ClassName = 'end';
                break;
            }
          })
          if (!this.allbidsData.length || planListPage == 1) {
            this.allLoaded = false;
            this.allbidsData = res.data.data;
          } else {
            this.allbidsData = this.allbidsData.concat(res.data.data);
          }
          console.log(res.data.data);
          if (loadmoreType == 'top') {
            this.$refs.loadmore.onTopLoaded();
          } else {
            this.$refs.loadmore.onBottomLoaded();
          }
        })
      },
      // 下拉刷新
      loadTop() {
        this.allbidsPage = 1;
        this.getallbidsData('top');
      },
      // 上拉加载
      loadBottom() {
        this.allbidsPage ++;
        this.getallbidsData('bottom');
      },
      // 点击改变状态
      changeState (item, key, ID) {
        this.ID = ID;
        this.popupVisible = !this.popupVisible;
        this.tempListData = item;
        this.tempIndex = key;
      },
      submitChangeStatus () {
        let status = this.year1.join();
        let id = this.ID;
        if (status == "0") {
          this.$toast('请选择状态');
          return false;
        }
        bid_modifyStatus(id, status).then(res => {
          if(res.status == 200) {
            this.$toast("操作成功");
            this.allbidsData[this.tempIndex].iRangeStatus = status;
            switch (status) {
              case "0":
                this.allbidsData[this.tempIndex].ClassName = 'create';
                break;
              case "1":
                this.allbidsData[this.tempIndex].ClassName = 'announcementPeriod';
                break;
              case "2":
                this.allbidsData[this.tempIndex].ClassName = 'tender';
                break;
              case "3":
                this.allbidsData[this.tempIndex].ClassName = 'bidEvaluationPeriod';
                break;
              case "4":
                this.allbidsData[this.tempIndex].ClassName = 'announcementPeriod';
                break;
              case "5":
                this.allbidsData[this.tempIndex].ClassName = 'end';
                break;
            }
            this.popupVisible = false;
          }
        })
      }
     },
    components: {
      'vm-common-header': vmCommonHeader,
      Swipeout,
      SwipeoutItem,
      SwipeoutButton,
      Picker
    },
    watch: {
      examineStatus (newV) {
        if (!newV) {
          for ( let o of this.$refs.swipeoutItem) {
            o.close();
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
.mint-popup {
  width: 100%;
  .submit {
    padding: 60px 25px 40px 25px;
    button {
      width: 100%;
      height: 92px;
      border-radius: 15px; /* no */
      font-size: 35px;
      color: #fff;
    }
  }
}
</style>
